<template>
	<div class="main">
    <scroll :isEnd='isEnd'
            @pullup='loadMore'
            :isLoading='true'
            :preventDefaultException='{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/ }'
            :tagException='{ className: /(^|\s)chat-box(\s|$)/ }'
            ref='scrollBox'>
      <div v-if="type === 'past'" class="search-wrapper">
        <div class="search-content">
          <p @click="handleFocus()" v-show="!isShowInput" class="icon-search">
            <span class="search"></span>
            <span class='input-box'>搜索</span>
          </p>
          <p v-show="isShowInput" class="search-text">
            <input id="input" ref="keyword" @keyup.enter="handleSearch()" @blur="handleBlur()" v-model="keywordText" type="text">
          </p>
        </div>
      </div>
      <div class="cont">
        <!-- 预约 -->
        <ul v-if="type === 'reservation' && meetingList.length" class="reservation-list">
          <MeetingItem
            v-for="(item, i) in meetingList"
            :meetingInfo="item"
            :key="i"
          />
        </ul>
        <!-- 往期 -->
        <ul v-if="type === 'past' && meetingList.length" class="past-list">
          <li v-for="(item, i) in meetingList" :key="i" class="meeting-item">
            <div class="meeting-info">
              <div class="info">
                <p class="title">{{item.meetingName}}</p>
                <p class="meeting-id">会议ID：{{item.meetingId}}</p>
                <p class="date">时间：{{item.meetingTime }}</p>
              </div>
              <div class="cover"></div>
            </div>
            <div class="address">
              <p>地点：{{item.meettingPlace}}</p>
            </div>
          </li>
        </ul>
        <div class='no-data-text' v-show='noData'>暂无数据</div>
      </div>
    </scroll>
	</div>
</template>
<script>
import MeetingItem from './components/meetingItem.vue'
import scroll from '@/components/scroll'

export default {
  components: {
    MeetingItem,
    scroll
  },
  data () {
    return {
      type: this.$route.params.type,
      isShowInput: false,
      keywordText: '',
      isEnd: true,
      page: 1,
      pageSize: 10,
      meetingList: [],
      noData: true
    }
  },
  methods: {
    loadMore () {
      this.fetchMeetingList()
    },
    fetchMeetingList () {
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/${sessionStorage.getItem('openid')}`
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize
      }
      if (this.keywordText) {
        params.keyword = this.keywordText
      }
      if (this.type === 'reservation') {
        params.meetingStatus = 1
      } else if (this.type === 'past') {
        params.meetingStatus = 2
      }
      this.$get(url, params).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (Number(data.total) <= 0) {
            this.noData = true
          } else {
            this.noData = false
          }
          if (data && data.list && data.list.length) {
            let meetingList = data.list
            this.meetingList = this.meetingList.concat(meetingList)
            if (data.isLastPage) {
              this.isEnd = true
            } else {
              this.isEnd = false
              this.page++
            }
            this.refreshScroll()
          } else {
            this.meetingList = []
            this.isEnd = true
          }
        }
      })
    },
    refreshScroll () {
      setTimeout(() => {
        if (this.$refs.scrollBox) {
          this.$refs.scrollBox.refresh()
        }
      }, 0)
    },
    handleSearch () {
      this.$refs.keyword && this.$refs.keyword.blur()
    },
    // 处理聚焦
    handleFocus () {
      this.isShowInput = true
      this.$nextTick(() => {
        this.$refs.keyword && this.$refs.keyword.focus()
      })
    },
    // 处理失焦
    handleBlur () {
      if (!this.keywordText) {
        this.isShowInput = false
      }
      this.meetingList = []
      this.fetchMeetingList()
    }
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if (e.target.id !== 'input') {
        this.$refs.keyword && this.$refs.keyword.blur()
      }
    }, false)
  },
  beforeDestroy () {
    document.removeEventListener('click', (e) => {
      if (e.target.id !== 'input') {
        this.$refs.keyword && this.$refs.keyword.blur()
      }
    }, false)
  },
  created () {
    this.fetchMeetingList()
  }
}
</script>
<style lang="stylus" scoped>
.main
	width 100%
	height 100vh
	overflow-y auto
	background #F9FAFB
	.search-wrapper
    width 100%
    .search-content
      width 100%
      height 80px
      padding 20px 15px
      box-sizing border-box
      .icon-search
        width 100%
        height 40px
        background #fff
        border-radius 8px
        display flex
        justify-content center
        align-items center
        padding 10px 0
        .search
          display inline-block
          width 16px
          height 16px
          background url('../../assets/img/ic_search@2x.png') no-repeat center / 100%
        .input-box
          border none
          font-size 15px
          height 20px
          line-height 20px
          outline none
          margin-left 5px
          color #BCBCBC
      .search-text
        width 100%
        height 40px
        background #fff
        border-radius 8px
        padding 10px 0
        box-sizing border-box
        input
          width 100%
          height 20px
          line-height 20px
          font-size 15px
          color #333
          padding 0 15px
          box-sizing border-box
	.cont
		width 100%
		// 预约
		.reservation-list
			width 100%
			padding 20px 15px 0
		// 往期
		.past-list
			width 100%
			padding 0 15px
			.meeting-item
				width 100%
				background #fff
				border-radius 8px
				margin-bottom 20px
				.meeting-info
					width 100%
					display flex
					justify-content space-between
					align-items center
					padding 17px 16px
					position relative
					&:after
						content ''
						display block
						width calc(100% - 24px)
						height 1px
						background #eee
						position absolute
						left 50%
						bottom 0
						transform translate(-50%, 0)
					.info
						width calc(100% - 108px)
						.title
							width 100%
							height 20px
							padding 0
							line-height 20px
							font-size 16px
							font-weight 700
							color #333
							noWrap()
						.meeting-id, .date
							line-height 16px
							font-size 12px
							color #999
						.meeting-id
							margin-top 14px
						.date
							margin-top 5px
					.cover
						width 84px
						height 68px
						background url('../../assets/img/banner_2@2x.png') no-repeat center / cover
						border-radius 8px
				.address
					width 100%
					padding 15px 10px
					p
						width calc(100% - 90px)
						height 16px
						line-height 16px
						font-size 12px
						color #666
						noWrap()
		.no-data-text
			width calc(100% - 30px)
			height 160px
			margin 0 auto
			// background #fff
			line-height 240px
			text-align center
			font-size 12px
			color #B2B2B2
			border-radius 8px
</style>
